<script>
import { LineLayer, Marker, MarkerLayer, PointLayer, PolygonLayer, Scene } from '@antv/l7'
import { Map } from '@antv/l7-maps'
import wuhanJson from '@/assets/geoJson/wuhan.json'
import mapTextureImg from '@/assets/images/screen-map-texture.png'
// 新
import positionTopImg from '@/assets/images/position-t.png'
import positionBottomImg from '@/assets/images/position-b.png'
import positionBottomShortImg from '@/assets/images/position-b-short.png'
import popupCloseBtnImg from '@/assets/images/screen-map-popup-close-btn.png'
import markerQtImg from '@/assets/images/screen-map-marker-qt.png'
import markerActiveQtImg from '@/assets/images/screen-map-marker-qt-a.png'
import { mapStatistics } from '@fl/api/add-elevator-api'
import { debounce } from 'lodash-es'

// const { Event } = Marker

export default {
    name: 'ScreenMap',
    props: {
        areaCode: {
            type: String,
            default: '',
        },
        outAreaCode: {
            type: String,
            default: '',
        },
        isFullScreen: {
            type: Boolean,
            default: false,
        },
    },
    emits: ['districtChange', 'projectAnalysis', 'mapListChange'],
    data() {
        return {
            wuhanCenter: [114.313961, 30.45],
            scene: null,
            markerList: [],
            originMapList: [],
            mapList: [], // 共用一个接口，所以数据在市/区基础上，新增了label、value
            cityOptions: [], // 市数据
            districtOptions: [], // 区数据
            cityId: '420100',
            districtId: undefined,
            subscription: null,
            minZoom: 8.6,
            maxZoom: 10,
            // 新
            wuhanMapData: [],
            isMounted: false,
            areaDetailInfo: {}, // 区域详情
            isAreaDetailShow: false,
            detailInfo: {}, // 街道详情
            isDetailShow: false,
            popupCloseBtnImg,
            isFocus: false, // 区域选项在全屏模式下是否focus
            textureLayer: undefined,
        }
    },
    watch: {
        areaCode(newVal) {
            console.log('newVal', newVal)
            this.districtId = newVal
            this.getMapPoint(newVal)
            this.closeDetail()
            this.closeAreaDetail()
            if (!newVal) {
                this.mapZoomOut()
            }
            else {
                this.mapZoomIn()
                // 江岸区特殊处理，来自顶部的区域分析
                if (newVal === '420102' && !this.outAreaCode) {
                    this.textureLayer.setSelect(0)
                    this.scene.panTo([114.301118, 30.667701])
                }
            }
        },
    },
    async mounted() {
        this.isMounted = true
        console.log('centerMap outAreaCode', this.outAreaCode)
        await this.getMapStatistics() // 顶部区域列表，暂和统计数据共用一个接口
        await this.getDistrictTree()
        this.initMap()
    },
    beforeUnmount() {
        this.$refs.screenMap.removeEventListener('mousewheel', this.handleMousewheel)
        this.scene.destroy()
    },
    methods: {
        async getMapStatistics() {
            // 此接口初始会调两次，原本代码是两个独立的接口
            const data = await mapStatistics({ level: '1', areaCode: '' })
            // console.log('getMapStatistics', data)
            let children = []
            if (data?.length > 0) {
                this.originMapList = data
                children = data.map(item => ({
                    areaCode: item.code,
                    areaName: item.name,
                    center: [Number.parseFloat(item.longitude), Number.parseFloat(item.latitude)], // 转换为数字数组
                }))
                this.wuhanMapData = [
                    {
                        areaCode: '420100',
                        areaName: '武汉市',
                        center: [114.313961, 30.45],
                        children,
                    },
                ]
                this.isMounted = false
                // console.log('wuhanMapData', this.wuhanMapData)
            }
        },
        // 首次获取城市、区域数据：cityOptions、districtOptions
        async getDistrictTree() {
            try {
                this.cityOptions = this.treeDataMap(this.wuhanMapData, 'areaName', 'areaCode')
                this.districtOptions = this.cityOptions[0].children || []
                console.log('getDistrictTree')
                if (this.outAreaCode) {
                    this.getMapPoint(this.outAreaCode)
                }
                else {
                    this.getMapPoint('')
                }
            }
            catch (error) {
                console.log(error)
            }
        },
        async getMapPoint(areaCode) {
            try {
                // console.log('getMapPoint', areaCode)
                const level = areaCode ? '2' : '1'
                if (this.scene) {
                    this.scene.removeAllMarkers()
                    this.markerList = []
                }
                const params = {
                    level,
                    areaCode: level === '2' ? areaCode : '',
                    // areaName: level === '2' ? areaCode : '',
                }
                if (this.isMounted) {
                    this.$emit('mapListChange', this.originMapList)
                    if (!areaCode) {
                        this.initAreaMarker(this.originMapList, '')
                    }
                    else {
                        this.originMapList.forEach((item, index) => {
                            this.initStreetMarker(item, index)
                        })
                    }
                }
                else {
                    const data = await mapStatistics(params)
                    // 找到最大数量
                    const maxTotalNum = data.reduce((max, item) => Math.max(max, item.totalNum), -Infinity)
                    // console.log('maxTotalNum', maxTotalNum)
                    this.mapList = data.reduce((pre, cur) => {
                        cur.label = cur.name
                        cur.value = cur.code
                        cur.height = this.calculateHeight(cur.totalNum, 1, maxTotalNum)
                        cur.center = [Number.parseFloat(cur.longitude), Number.parseFloat(cur.latitude)]
                        pre.push(cur)
                        return pre
                    }, [])
                    console.log('this.mapList', this.mapList)
                    this.$emit('mapListChange', this.mapList)
                    if (!areaCode) {
                        this.initAreaMarker(data, '')
                    }
                    else {
                        data.forEach((item, index) => {
                            this.initStreetMarker(item, index)
                        })
                    }
                }
            }
            catch (error) {
                console.log(error)
            }
        },

        // 手写select框部分
        isSelected(option) {
            return option.value === this.districtId
        },

        selectOption(option, index) {
            console.log(option, index, wuhanJson)
            this.$emit('districtChange', option.value)
            this.gotoPoint(index, true, true)
        },

        districtFocus() {
            if (this.outAreaCode)
                return
            this.isFocus = !this.isFocus
        },

        districtBlur() {
            this.isFocus = false
        },

        // ds：动态处理点位高度
        calculateHeight(value, min, max) {
            // 边界情况：所有值相同
            if (max === min)
                return 50

            // 计算比例位置 (0到1之间)
            const ratio = (value - min) / (max - min)

            // 映射到10-90范围并四舍五入
            return Math.round(10 + ratio * 80) // 90-10=80
        },
        treeDataMap(treeData, labelKey, valueKey) {
            if (treeData.find(item => item.cityLevel === 4)) {
                return undefined
            }
            const result = []
            for (const item of treeData) {
                const handledItem = {
                    children: item.children ? this.treeDataMap(item.children, labelKey, valueKey) : undefined,
                    label: item[labelKey],
                    value: item[valueKey],
                }
                result.push(handledItem)
            }
            return result
        },
        initMap() {
            const scene = new Scene({
                id: 'screen-map',
                logoVisible: false,
                map: new Map({
                    center: this.wuhanCenter,
                    zoom: this.minZoom,
                    pitch: 20,
                    minZoom: this.minZoom,
                    maxZoom: this.maxZoom,
                    maxBounds: [[113.4, 29.95], [115.4, 31.7]],
                }),
            })
            scene.setMapStatus({ zoomEnable: true })
            this.scene = scene
            scene.on('loaded', () => {
                scene.getLayers().forEach((existingLayer) => {
                    scene.removeLayer(existingLayer)
                })
                this.initLayer(scene, wuhanJson)
            })
            // scene.on('zoomend', () => {
            //     // if (this.scene.getZoom() === this.minZoom) {
            //     //     console.log('minZoom', this.cityId, this.districtId)
            //     //     this.getMapPoint(this.districtId)
            //     // }
            //     // else if (this.scene.getZoom() === this.maxZoom) {
            //     //     console.log('maxZoom', this.cityId, this.districtId)
            //     //     this.getMapPoint(this.districtId)
            //     // }
            // })
            this.$refs.screenMap.addEventListener('mousewheel', this.handleMousewheel)
        },
        createSimpleInfoElement(val) {
            // console.log('hover', val)
            const div = document.createElement('div')
            div.innerHTML = `
                <div class="marker-header">
                    ${val}
                    <span class="close-btn">×</span>
                </div>
            `
        },

        initLayer(scene, data) {
            const texts = data.features.map((option) => {
                const { name, center } = option.properties
                const [lng, lat] = center
                return { name, lng, lat }
            })

            const textLayer = new PointLayer({ zIndex: 3 })
                .source(texts, {
                    parser: {
                        type: 'json',
                        x: 'lng',
                        y: 'lat',
                    },
                })
                .shape('name', 'text')
                .size(14)
                .color('white')
                .style({
                    textAnchor: 'center', // 文本相对锚点的位置 center|left|right|top|bottom|top-left
                    spacing: 2, // 字符间距
                    padding: [1, 1], // 文本包围盒 padding [水平，垂直]，影响碰撞检测结果，避免相邻文本靠的太近
                    textAllowOverlap: true,
                })
            scene.addLayer(textLayer)

            const textureLayer = new PolygonLayer({})
                .source(data)
                .shape('extrude')
                .color('#29F1FA')
                .active({
                    color: 'rgba(41, 241, 250, 0.3)',
                })
                .select({
                    color: 'rgba(41, 241, 250, 0.3)',
                })
                .style({
                    mapTexture: mapTextureImg,
                    heightfixed: true,
                    pickLight: true,
                    raisingHeight: 10000,
                })
            this.textureLayer = textureLayer
            scene.addLayer(textureLayer)

            const lineLayer1 = new LineLayer()
                .source(data)
                .shape('line')
                .color('#29F1FA')
                .size(0.5)
                .style({
                    raisingHeight: 0,
                    opacity: 0.1,
                })

            const lineLayer2 = new LineLayer()
                .source(data)
                .shape('line')
                .color('#29F1FA')
                .size(0.5)
                .style({
                    raisingHeight: 12500,
                    opacity: 0.4,
                })

            const lineLayer3 = new LineLayer({ zIndex: 1 })
                .source(data)
                .shape('line')
                .color('#29F1FA')
                .size(1)
                .style({
                    raisingHeight: 25000,
                    opacity: 1,
                })

            scene.addLayer(lineLayer1)
            scene.addLayer(lineLayer2)
            scene.addLayer(lineLayer3)

            textureLayer.on('click', ({ feature, featureId }) => {
                // 区权限的，不能切换其他区
                if (this.outAreaCode)
                    return
                if (feature.properties) {
                    console.log('feature.properties', feature.properties, featureId, this.districtOptions)
                    // 暂无汉南区:8
                    // if (featureId === 8)
                    //     return
                    // 手动改成经开汉南
                    if (featureId === 8) {
                        featureId = 15
                    }
                    featureId = featureId > 8 ? featureId - 1 : featureId
                    this.scene.panTo(feature.properties.center)
                    this.$emit('districtChange', this.districtOptions[featureId].value)
                    textureLayer.setSelect(featureId)
                    if (this.scene.getZoom() === this.maxZoom) {
                        this.getMapPoint(this.districtOptions[featureId].value)
                    }
                    else {
                        this.mapZoomIn()
                    }
                }
            })

            // 有outAreaCode时，居中+高亮该区域
            const index = this.districtOptions.findIndex(item => item.value === this.outAreaCode?.toString())
            console.log('out index', index)
            if (index < 0)
                return
            setTimeout(() => {
                this.gotoPoint(index, true, true)
                this.mapZoomIn()
            }, 500)
        },
        initStreetMarker(mapInfo, index) {
            // console.log('mapInfo', mapInfo)
            const { longitude: lng, latitude: lat } = mapInfo
            // 异常经纬度
            if (lng === null || lat === null || lat > 90 || lat < -90) {
                return
            }

            const markerLayer = new MarkerLayer()
            const marker = new Marker()
                .setLnglat({ lng, lat })
                .setElement(this.getMarkerImgEl(false))
            this.markerList[index] = marker

            marker.on('click', async (e) => {
                // console.log('click', e, mapInfo)
                this.detailInfo = mapInfo
                this.isDetailShow = true
                this.mapZoomIn()
                this.markerList.forEach((markerItem) => {
                    markerItem.setElement(this.getMarkerImgEl(false))
                })
                marker.setElement(this.getMarkerImgEl(true))
                const { lng, lat } = e.lngLat
                this.scene.panTo([Number(lng), Number(lat) + 0.1])
            })
            markerLayer.addMarker(marker)

            this.scene.addMarkerLayer(markerLayer)
        },
        getMarkerImgEl(isActive) {
            const el = document.createElement('label')
            let markerImg
            if (isActive) {
                markerImg = markerActiveQtImg
            }
            else {
                markerImg = markerQtImg
            }
            el.style.cssText = `
                width: 40px;
                height: 40px;
                background-image: url(${markerImg});
                background-size: 100% 100%;
                background-repeat: no-repeat;
            `
            return el
        },
        initAreaMarker(data) {
            // console.log('initAreaMarker', data)
            const markerLayer = new MarkerLayer()
            // console.log('initAreaMarker', this.mapList, this.districtOptions)
            const districtData = this.mapList
            // console.log('districtData', districtData)
            for (const districtItem of districtData) {
                const markerCenter = this.wuhanMapData[0].children.find(item => item.areaName === districtItem.label)?.center
                // console.log('markerCenter', markerCenter)

                const markerElement = document.createElement('div')
                const marker = new Marker({ element: markerElement })
                    .setLnglat({ lng: markerCenter[0], lat: markerCenter[1] })
                    .setElement(this.getStatisticsMarkerEl(data, districtItem, true))

                marker.on('click', (e) => {
                    this.isAreaDetailShow = false
                    this.handleDistrictChange(districtItem.value)
                    this.$emit('districtChange', districtItem.value)
                })
                markerLayer.addMarker(marker)

                // 查看区详情，hover效果
                let hoverTimer = null
                let isHovering = false
                marker.on('mouseover', () => {
                    this.areaDetailInfo = districtItem
                    clearTimeout(hoverTimer)
                    if (!isHovering) {
                        hoverTimer = setTimeout(() => {
                            isHovering = true
                            this.isAreaDetailShow = true
                            marker.getElement().classList.add('hover-effect')
                        }, 500)
                    }
                })

                // 离开处理
                marker.on('mouseout', () => {
                    clearTimeout(hoverTimer)
                    if (isHovering) {
                        isHovering = false
                        this.isAreaDetailShow = false
                        marker.getElement().classList.remove('hover-effect')
                    }
                })
            }
            // console.log('this.scene 1', this.scene)
            this.scene.addMarkerLayer(markerLayer)
        },
        // 区marker
        getStatisticsMarkerEl(projectData, districtItem, isActive) {
            // console.log('districtItem', districtItem)
            const markerText = districtItem.label
            // const markerNumber = projectData.filter(item => item.areaCode === districtItem.value).length
            const markerNumber = districtItem.totalNum
            const markerHeight = districtItem.height
            const markerEl = document.createElement('div')
            markerEl.className = isActive ? 'statistics-marker active' : 'statistics-marker'
            markerEl.innerHTML = `
                <div style="height: 120px;
                    width: 30px;
                    display:flex;
                    justify-content:flex-end;
                    flex-direction:column;
                    position:relative;
                    background: none;"
                >
                    <img src="${positionTopImg}"
                         style="width: 30px;height: 30px;"
                    >

                    <img src="${markerHeight < 30 ? positionBottomShortImg : positionBottomImg}"
                         style="width: 10px;height: ${markerHeight}px;margin:10px 10px 0;"
                    >

                    <div style="position:absolute;
                        bottom: ${44 + markerHeight > 94 ? 94 : 44 + markerHeight}px;
                        left: 40px;
                        height: 24px;
                        font-family: D-DIN-PRO;
                        font-size: 14px;
                        font-weight: 400;
                        display: flex;
                        align-items: center;
                        padding: 0 4px;
                        background: rgba(24, 15, 0, 0.6);border: 0.5px solid transparent;
                        border-image: linear-gradient(135deg,#FFDDA4 0%,rgba(255, 224, 172, 0.4247) 50%,#FFDDA4 100%) 1;"
                    >
                        <span style="font-weight: 600;">${markerNumber}</span>
                        <span style="font-size: 12px;color: rgba(255, 255, 255, 0.8);">个</span>
                    </div>
                    <div style="
                        height: 30px;
                        font-family: D-DIN-PRO;
                        font-size: 16px;
                        display: flex;
                        justify-content: center;"
                    >
                        ${markerText}
                    </div>
                </div>
            `
            return markerEl
        },
        handleDistrictChange(val) {
            console.log('handleDistrictChange', val, this.districtOptions)
            // 找出val在districtOptions中的索引
            const index = this.districtOptions.findIndex(item => item.value === val?.toString())
            console.log('index', index)
            if ([undefined, ''].includes(val)) {
                // console.log('handleDistrictChange111')
                this.$emit('districtChange', '')
                this.textureLayer.setSelect(undefined)
                if (this.scene.getZoom() === this.minZoom) {
                    this.getMapPoint('')
                }
                else {
                    this.mapZoomOut()
                }
                this.scene.panTo(this.wuhanCenter)
            }
            else {
                // console.log('handleDistrictChange222')
                this.$emit('districtChange', val)
                // getMapPoint(areaCode)
                this.textureLayer.setSelect(val)
                if (this.scene.getZoom() === this.maxZoom) {
                    this.getMapPoint(val)
                }
                else {
                    this.mapZoomIn()
                }
                const center = this.wuhanMapData[0].children.find(item => item.areaCode === val)?.center
                this.scene.panTo(center)
                this.gotoPoint(index, true, false)
            }
        },
        handleMousewheel(e) {
            e.wheelDelta > 0 ? this.mapZoomIn() : this.mapZoomOut()
        },
        mapZoomIn: debounce(function () {
            this.scene.setZoom(this.maxZoom)
        }, 300),
        mapZoomOut: debounce(function () {
            this.scene.setZoom(this.minZoom)
        }, 300),
        // mapPanTo(center) {
        //     console.log('mapPanTo', center)
        //     setTimeout(() => {
        //         this.scene.panTo(center)
        //     }, 300)
        // },

        // 关闭详情弹窗.
        closeAreaDetail() {
            this.isAreaDetailShow = false
            this.areaDetailInfo = {}
        },
        closeDetail() {
            this.isDetailShow = false
            this.detailInfo = {}
        },
        // 统一处理高亮和移动到中心点
        gotoPoint(index, needLight, needMove) {
            // 找到索引对应
            let featureId = 0
            if (index === 15) {
                featureId = 6
            }
            else if (index === 14) {
                featureId = 8
            }
            else if (index === 13) {
                featureId = 5
            }
            else if (index === 12) {
                featureId = 6
            }
            else if (index >= 8) {
                featureId = index + 1
            }
            else if (index < 8) {
                featureId = index
            }
            // 高亮
            if (needLight) {
                if (index < 12) {
                    this.textureLayer.setSelect(featureId)
                }
                else {
                    this.textureLayer.setSelect(undefined)
                }
            }
            // 移动
            if (needMove) {
                const feature = wuhanJson.features[featureId]
                this.scene.panTo(feature.properties.center)
            }
        },
    },
}
</script>

<template>
    <div id="screen-map"
         ref="screenMap"
    >
        <div class="filter-wrapper">
            <el-select v-model="cityId"
                       style="width: 12em;"
                       :popper-append-to-body="false"
                       popper-class="screen-select-popper"
                       disabled
            >
                <el-option v-for="item in cityOptions"
                           :key="item.label"
                           :label="item.label"
                           :value="item.value"
                />
            </el-select>

            <el-select v-model="districtId"
                       style="width: 12em;"
                       :popper-append-to-body="false"
                       placeholder="全市"
                       clearable
                       popper-class="screen-select-popper"
                       :disabled="!!outAreaCode"
                       @change="handleDistrictChange"
                       @click="districtFocus"
                       @blur="districtBlur"
            >
                <el-option v-for="item in districtOptions"
                           :key="item.label"
                           :label="item.label"
                           :value="item.value"
                />
            </el-select>

            <!-- 全屏状态下手写select框 -->
            <transition name="el-zoom-in-top">
                <div v-show="isFullScreen && isFocus"
                     class="select-box"
                     @scroll.stop
                     @wheel.stop
                >
                    <ul class="custom-select-dropdown__list">
                        <li v-for="(option, index) in districtOptions"
                            :key="index"
                            class="custom-select-dropdown__item"
                            :class="{
                                'is-selected': isSelected(option),
                                'is-disabled': option.disabled,
                            }"
                            @mousedown.stop="selectOption(option, index)"
                        >
                            <span>{{ option.label }}</span>
                        </li>
                    </ul>
                </div>
            </transition>
        </div>

        <!-- 区域详情 -->
        <div v-show="isAreaDetailShow && !areaCode"
             class="top-info"
        >
            <div class="top-title">
                {{ areaDetailInfo?.name }}
            </div>

            <div class="line">
                <span class="left">楼栋数量：</span>

                <span>
                    <span class="num">{{ areaDetailInfo?.totalNum || 0 }}</span>
                    个
                </span>
            </div>

            <div class="line">
                <span class="left">已上报：</span>

                <span>
                    <span class="num">{{ areaDetailInfo?.submitNum || 0 }}</span>
                    台
                </span>
            </div>

            <div class="line">
                <span class="left">加装中：</span>

                <span>
                    <span class="num">{{ areaDetailInfo?.processNum || 0 }}</span>
                    台
                </span>
            </div>

            <div class="line">
                <span class="left">已加装：</span>

                <span>
                    <span class="num">{{ areaDetailInfo?.num || 0 }}</span>
                    台
                </span>
            </div>

            <img class="close-btn"
                 :src="popupCloseBtnImg"
                 alt=""
                 height="20"
                 @click="closeAreaDetail"
            >
        </div>

        <!-- 街道详情 -->
        <div v-show="isDetailShow"
             class="top-info top-info2"
        >
            <div class="top-title">
                {{ detailInfo?.name }}
            </div>

            <div class="line">
                <span class="left">楼栋数量：</span>

                <span>
                    <span class="num">{{ detailInfo?.totalNum || 0 }}</span>
                    个
                </span>
            </div>

            <div class="line">
                <span class="left">已上报：</span>

                <span>
                    <span class="num">{{ detailInfo?.submitNum || 0 }}</span>
                    台
                </span>
            </div>

            <div class="line">
                <span class="left">加装中：</span>

                <span>
                    <span class="num">{{ detailInfo?.processNum || 0 }}</span>
                    台
                </span>
            </div>

            <div class="line">
                <span class="left">已加装：</span>

                <span>
                    <span class="num">{{ detailInfo?.num || 0 }}</span>
                    台
                </span>
            </div>

            <img class="close-btn"
                 :src="popupCloseBtnImg"
                 alt=""
                 height="20"
                 @click="closeDetail"
            >
        </div>
    </div>
</template>

<style lang="scss" scoped>
#screen-map {
    justify-content: center;
    position: relative;
}

:deep(.l7-popup) {
    .l7-popup-content {
        padding: 0;
    }

    .l7-popup-tip {
        display: none;
    }

    // .l7-popup-close-button {
    //   z-index: 99;
    //   top: 0;
    //   right: 0;
    //   width: 40px;
    //   height: 40px;
    //   opacity: 0;
    // }
}

.filter-wrapper {
    position: absolute;
    right: 1em;
    top: 0.4em;
    z-index: 99;
    display: flex;
    gap: 1.6em;
}

.el-select {
    z-index: 99;

    :deep(.el-input) {
        font-size: 100%;
    }

    :deep(.el-input--medium .el-input__inner) {
        height: 2.8em;
        background: rgb(31 128 255 / 12%);
        border: 1px solid rgb(31 128 255 / 20%);
        box-shadow: inset 0 0 0.6em 0 rgb(88 197 255 / 50%);
        color: white;
    }

    :deep(.el-input--medium .el-input__icon) {
        font-size: 100%;
        line-height: 2.8em;
    }
}

:deep(.statistics-marker) {
    > div:first-child {
        background: rgb(0 16 29 / 90%);
    }

    label {
        background-image: url('~@/assets/images/screen-map-marker.png');
    }
}
.top-info {
    width: 15em;
    height: 11em;
    /* 自动布局 */
    display: flex;
    flex-direction: column;
    justify-content: center;
    // align-items: center;
    background: rgba(24, 15, 0, 0.6);
    box-sizing: border-box;
    font-family: D-DIN-PRO;
    position: absolute;
    top: 1em;
    left: 1em;
    z-index: 999;
    border: 0.5px solid;
    text-align: left;
    border-image: linear-gradient(
            135deg,
            #ffdda4 0%,
            rgba(255, 224, 172, 0.4247) 50%,
            #ffdda4 100%
        )
        1;
    font-size: 1.2em;
    div {
        color: rgba(255, 255, 255, 0.5);
    }
    .top-title {
        color: #ffffff;
        font-weight: 600;
        font-size: 1.3em;
        margin-left: 1.5em;
        width: 8em;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
    }
    .line {
        // display: flex;
        // // justify-content: space-between;
        // align-items: center;
        text-align: left;
        .left {
            display: inline-block;
            margin-left: 2em;
            width: 6em;
        }
        .num {
            color: #ffffff;
            font-weight: 600;
            font-size: 1.3em;
        }
    }
    .close-btn {
        position: absolute;
        width: 1.6em;
        height: 1.6em;
        top: 0;
        right: 0;
        cursor: pointer;
    }
}
.top-info2 {
    top: 16em;
    left: 50%;
    transform: translateX(-50%);
}

.select-box {
    width: 16em;
    height: 22em;
    background-color: #fff;
    overflow: auto;
    border-radius: 0.2em;
    position: absolute;
    top: 4em;
    right: -4em;
    .custom-select-dropdown__list {
        margin: 0;
        padding: 0;
        list-style: none;
        white-space: nowrap;
    }

    .custom-select-dropdown__item {
        padding: 0 20px;
        height: 34px;
        line-height: 34px;
        cursor: pointer;
        color: #606266;
    }

    .custom-select-dropdown__item:hover {
        background-color: #f5f7fa;
    }

    .custom-select-dropdown__item.is-selected {
        color: #da0004;
        font-weight: 700;
        background-color: #f0f7ff;
    }

    .custom-select-dropdown__item.is-disabled {
        color: #c0c4cc;
        cursor: not-allowed;
    }

    .custom-select-dropdown__item.is-disabled:hover {
        background-color: transparent;
    }

    .custom-select-dropdown__empty {
        padding: 10px 20px;
        color: #c0c4cc;
        text-align: center;
    }
    .el-zoom-in-top-enter-active,
    .el-zoom-in-top-leave-active {
        opacity: 1;
        transform: scaleY(1);
        transition:
            transform 0.3s cubic-bezier(0.23, 1, 0.32, 1),
            opacity 0.3s cubic-bezier(0.23, 1, 0.32, 1);
        transform-origin: center top;
    }

    .el-zoom-in-top-enter-from,
    .el-zoom-in-top-leave-active {
        opacity: 0;
        transform: scaleY(0);
    }
}
</style>
